<template>
  <basic-container>
    <el-row class="row-bg" gutter="20">
      <el-col span="24">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="选择地址">
            <el-select v-model="form.area" placeholder="选择地址">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="光伏功率">
            <el-select v-model="form.power" placeholder="光伏功率">
              <el-option label="功率一" value="shanghai"></el-option>
              <el-option label="功率二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="map-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div id="summary-chart" class="bg-purple-light chart-container"></div>
      </el-col>
    </el-row>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="preview-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div id="bar-summary-chart" class="bg-purple-light chart-container"></div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
  import echarts from 'echarts';

  export default {
    data() {
      return {
        form: {
          area: '',
          power: ''
        },
        weatherIcons: {
          'Showers': '/img/ai/showers_128.png',
          'Sunny': '/img/ai/sunny_128.png',
          'Cloudy': '/img/ai/cloudy_128.png'
        },
        map: {
          instance: null,
          data: [
            {name: '海门', value: 9},
            {name: '鄂尔多斯', value: 12},
            {name: '招远', value: 12},
            {name: '舟山', value: 12},
            {name: '齐齐哈尔', value: 14},
            {name: '盐城', value: 15},
            {name: '赤峰', value: 16},
            {name: '青岛', value: 18},
            {name: '乳山', value: 18},
            {name: '金昌', value: 19},
            {name: '泉州', value: 21},
            {name: '莱西', value: 21},
            {name: '日照', value: 21},
            {name: '胶南', value: 22},
            {name: '南通', value: 23},
            {name: '拉萨', value: 24},
            {name: '云浮', value: 24},
            {name: '梅州', value: 25},
            {name: '文登', value: 25},
            {name: '上海', value: 25},
            {name: '攀枝花', value: 25},
            {name: '威海', value: 25},
            {name: '承德', value: 25},
            {name: '厦门', value: 26},
            {name: '汕尾', value: 26},
            {name: '潮州', value: 26},
            {name: '丹东', value: 27},
            {name: '太仓', value: 27},
            {name: '曲靖', value: 27},
            {name: '烟台', value: 28},
            {name: '福州', value: 29},
            {name: '瓦房店', value: 30},
            {name: '即墨', value: 30},
            {name: '抚顺', value: 31},
            {name: '玉溪', value: 31},
            {name: '张家口', value: 31},
            {name: '阳泉', value: 31},
            {name: '莱州', value: 32},
            {name: '湖州', value: 32},
            {name: '汕头', value: 32},
            {name: '昆山', value: 33},
            {name: '宁波', value: 33},
            {name: '湛江', value: 33},
            {name: '揭阳', value: 34},
            {name: '荣成', value: 34},
            {name: '连云港', value: 35},
            {name: '葫芦岛', value: 35},
            {name: '常熟', value: 36},
            {name: '东莞', value: 36},
            {name: '河源', value: 36},
            {name: '淮安', value: 36},
            {name: '泰州', value: 36},
            {name: '南宁', value: 37},
            {name: '营口', value: 37},
            {name: '惠州', value: 37},
            {name: '江阴', value: 37},
            {name: '蓬莱', value: 37},
            {name: '韶关', value: 38},
            {name: '嘉峪关', value: 38},
            {name: '广州', value: 38},
            {name: '延安', value: 38},
            {name: '太原', value: 39},
            {name: '清远', value: 39},
            {name: '中山', value: 39},
            {name: '昆明', value: 39},
            {name: '寿光', value: 40},
            {name: '盘锦', value: 40},
            {name: '长治', value: 41},
            {name: '深圳', value: 41},
            {name: '珠海', value: 42},
            {name: '宿迁', value: 43},
            {name: '咸阳', value: 43},
            {name: '铜川', value: 44},
            {name: '平度', value: 44},
            {name: '佛山', value: 44},
            {name: '海口', value: 44},
            {name: '江门', value: 45},
            {name: '章丘', value: 45},
            {name: '肇庆', value: 46},
            {name: '大连', value: 47},
            {name: '临汾', value: 47},
            {name: '吴江', value: 47},
            {name: '石嘴山', value: 49},
            {name: '沈阳', value: 50},
            {name: '苏州', value: 50},
            {name: '茂名', value: 50},
            {name: '嘉兴', value: 51},
            {name: '长春', value: 51},
            {name: '胶州', value: 52},
            {name: '银川', value: 52},
            {name: '张家港', value: 52},
            {name: '三门峡', value: 53},
            {name: '锦州', value: 54},
            {name: '南昌', value: 54},
            {name: '柳州', value: 54},
            {name: '三亚', value: 54},
            {name: '自贡', value: 56},
            {name: '吉林', value: 56},
            {name: '阳江', value: 57},
            {name: '泸州', value: 57},
            {name: '西宁', value: 57},
            {name: '宜宾', value: 58},
            {name: '呼和浩特', value: 58},
            {name: '成都', value: 58},
            {name: '大同', value: 58},
            {name: '镇江', value: 59},
            {name: '桂林', value: 59},
            {name: '张家界', value: 59},
            {name: '宜兴', value: 59},
            {name: '北海', value: 60},
            {name: '西安', value: 61},
            {name: '金坛', value: 62},
            {name: '东营', value: 62},
            {name: '牡丹江', value: 63},
            {name: '遵义', value: 63},
            {name: '绍兴', value: 63},
            {name: '扬州', value: 64},
            {name: '常州', value: 64},
            {name: '潍坊', value: 65},
            {name: '重庆', value: 66},
            {name: '台州', value: 67},
            {name: '南京', value: 67},
            {name: '滨州', value: 70},
            {name: '贵阳', value: 71},
            {name: '无锡', value: 71},
            {name: '本溪', value: 71},
            {name: '克拉玛依', value: 72},
            {name: '渭南', value: 72},
            {name: '马鞍山', value: 72},
            {name: '宝鸡', value: 72},
            {name: '焦作', value: 75},
            {name: '句容', value: 75},
            {name: '北京', value: 79},
            {name: '徐州', value: 79},
            {name: '衡水', value: 80},
            {name: '包头', value: 80},
            {name: '绵阳', value: 80},
            {name: '乌鲁木齐', value: 84},
            {name: '枣庄', value: 84},
            {name: '杭州', value: 84},
            {name: '淄博', value: 85},
            {name: '鞍山', value: 86},
            {name: '溧阳', value: 86},
            {name: '库尔勒', value: 86},
            {name: '安阳', value: 90},
            {name: '开封', value: 90},
            {name: '济南', value: 92},
            {name: '德阳', value: 93},
            {name: '温州', value: 95},
            {name: '九江', value: 96},
            {name: '邯郸', value: 98},
            {name: '临安', value: 99},
            {name: '兰州', value: 99},
            {name: '沧州', value: 100},
            {name: '临沂', value: 103},
            {name: '南充', value: 104},
            {name: '天津', value: 105},
            {name: '富阳', value: 106},
            {name: '泰安', value: 112},
            {name: '诸暨', value: 112},
            {name: '郑州', value: 113},
            {name: '哈尔滨', value: 114},
            {name: '聊城', value: 116},
            {name: '芜湖', value: 117},
            {name: '唐山', value: 119},
            {name: '平顶山', value: 119},
            {name: '邢台', value: 119},
            {name: '德州', value: 120},
            {name: '济宁', value: 120},
            {name: '荆州', value: 127},
            {name: '宜昌', value: 130},
            {name: '义乌', value: 132},
            {name: '丽水', value: 133},
            {name: '洛阳', value: 134},
            {name: '秦皇岛', value: 136},
            {name: '株洲', value: 143},
            {name: '石家庄', value: 147},
            {name: '莱芜', value: 148},
            {name: '常德', value: 152},
            {name: '保定', value: 153},
            {name: '湘潭', value: 154},
            {name: '金华', value: 157},
            {name: '岳阳', value: 169},
            {name: '长沙', value: 175},
            {name: '衢州', value: 177},
            {name: '廊坊', value: 193},
            {name: '菏泽', value: 194},
            {name: '合肥', value: 229},
            {name: '武汉', value: 273},
            {name: '大庆', value: 279}
          ],
          geoCoordMap: {
            '海门':[121.15,31.89],
            '鄂尔多斯':[109.781327,39.608266],
            '招远':[120.38,37.35],
            '舟山':[122.207216,29.985295],
            '齐齐哈尔':[123.97,47.33],
            '盐城':[120.13,33.38],
            '赤峰':[118.87,42.28],
            '青岛':[120.33,36.07],
            '乳山':[121.52,36.89],
            '金昌':[102.188043,38.520089],
            '泉州':[118.58,24.93],
            '莱西':[120.53,36.86],
            '日照':[119.46,35.42],
            '胶南':[119.97,35.88],
            '南通':[121.05,32.08],
            '拉萨':[91.11,29.97],
            '云浮':[112.02,22.93],
            '梅州':[116.1,24.55],
            '文登':[122.05,37.2],
            '上海':[121.48,31.22],
            '攀枝花':[101.718637,26.582347],
            '威海':[122.1,37.5],
            '承德':[117.93,40.97],
            '厦门':[118.1,24.46],
            '汕尾':[115.375279,22.786211],
            '潮州':[116.63,23.68],
            '丹东':[124.37,40.13],
            '太仓':[121.1,31.45],
            '曲靖':[103.79,25.51],
            '烟台':[121.39,37.52],
            '福州':[119.3,26.08],
            '瓦房店':[121.979603,39.627114],
            '即墨':[120.45,36.38],
            '抚顺':[123.97,41.97],
            '玉溪':[102.52,24.35],
            '张家口':[114.87,40.82],
            '阳泉':[113.57,37.85],
            '莱州':[119.942327,37.177017],
            '湖州':[120.1,30.86],
            '汕头':[116.69,23.39],
            '昆山':[120.95,31.39],
            '宁波':[121.56,29.86],
            '湛江':[110.359377,21.270708],
            '揭阳':[116.35,23.55],
            '荣成':[122.41,37.16],
            '连云港':[119.16,34.59],
            '葫芦岛':[120.836932,40.711052],
            '常熟':[120.74,31.64],
            '东莞':[113.75,23.04],
            '河源':[114.68,23.73],
            '淮安':[119.15,33.5],
            '泰州':[119.9,32.49],
            '南宁':[108.33,22.84],
            '营口':[122.18,40.65],
            '惠州':[114.4,23.09],
            '江阴':[120.26,31.91],
            '蓬莱':[120.75,37.8],
            '韶关':[113.62,24.84],
            '嘉峪关':[98.289152,39.77313],
            '广州':[113.23,23.16],
            '延安':[109.47,36.6],
            '太原':[112.53,37.87],
            '清远':[113.01,23.7],
            '中山':[113.38,22.52],
            '昆明':[102.73,25.04],
            '寿光':[118.73,36.86],
            '盘锦':[122.070714,41.119997],
            '长治':[113.08,36.18],
            '深圳':[114.07,22.62],
            '珠海':[113.52,22.3],
            '宿迁':[118.3,33.96],
            '咸阳':[108.72,34.36],
            '铜川':[109.11,35.09],
            '平度':[119.97,36.77],
            '佛山':[113.11,23.05],
            '海口':[110.35,20.02],
            '江门':[113.06,22.61],
            '章丘':[117.53,36.72],
            '肇庆':[112.44,23.05],
            '大连':[121.62,38.92],
            '临汾':[111.5,36.08],
            '吴江':[120.63,31.16],
            '石嘴山':[106.39,39.04],
            '沈阳':[123.38,41.8],
            '苏州':[120.62,31.32],
            '茂名':[110.88,21.68],
            '嘉兴':[120.76,30.77],
            '长春':[125.35,43.88],
            '胶州':[120.03336,36.264622],
            '银川':[106.27,38.47],
            '张家港':[120.555821,31.875428],
            '三门峡':[111.19,34.76],
            '锦州':[121.15,41.13],
            '南昌':[115.89,28.68],
            '柳州':[109.4,24.33],
            '三亚':[109.511909,18.252847],
            '自贡':[104.778442,29.33903],
            '吉林':[126.57,43.87],
            '阳江':[111.95,21.85],
            '泸州':[105.39,28.91],
            '西宁':[101.74,36.56],
            '宜宾':[104.56,29.77],
            '呼和浩特':[111.65,40.82],
            '成都':[104.06,30.67],
            '大同':[113.3,40.12],
            '镇江':[119.44,32.2],
            '桂林':[110.28,25.29],
            '张家界':[110.479191,29.117096],
            '宜兴':[119.82,31.36],
            '北海':[109.12,21.49],
            '西安':[108.95,34.27],
            '金坛':[119.56,31.74],
            '东营':[118.49,37.46],
            '牡丹江':[129.58,44.6],
            '遵义':[106.9,27.7],
            '绍兴':[120.58,30.01],
            '扬州':[119.42,32.39],
            '常州':[119.95,31.79],
            '潍坊':[119.1,36.62],
            '重庆':[106.54,29.59],
            '台州':[121.420757,28.656386],
            '南京':[118.78,32.04],
            '滨州':[118.03,37.36],
            '贵阳':[106.71,26.57],
            '无锡':[120.29,31.59],
            '本溪':[123.73,41.3],
            '克拉玛依':[84.77,45.59],
            '渭南':[109.5,34.52],
            '马鞍山':[118.48,31.56],
            '宝鸡':[107.15,34.38],
            '焦作':[113.21,35.24],
            '句容':[119.16,31.95],
            '北京':[116.46,39.92],
            '徐州':[117.2,34.26],
            '衡水':[115.72,37.72],
            '包头':[110,40.58],
            '绵阳':[104.73,31.48],
            '乌鲁木齐':[87.68,43.77],
            '枣庄':[117.57,34.86],
            '杭州':[120.19,30.26],
            '淄博':[118.05,36.78],
            '鞍山':[122.85,41.12],
            '溧阳':[119.48,31.43],
            '库尔勒':[86.06,41.68],
            '安阳':[114.35,36.1],
            '开封':[114.35,34.79],
            '济南':[117,36.65],
            '德阳':[104.37,31.13],
            '温州':[120.65,28.01],
            '九江':[115.97,29.71],
            '邯郸':[114.47,36.6],
            '临安':[119.72,30.23],
            '兰州':[103.73,36.03],
            '沧州':[116.83,38.33],
            '临沂':[118.35,35.05],
            '南充':[106.110698,30.837793],
            '天津':[117.2,39.13],
            '富阳':[119.95,30.07],
            '泰安':[117.13,36.18],
            '诸暨':[120.23,29.71],
            '郑州':[113.65,34.76],
            '哈尔滨':[126.63,45.75],
            '聊城':[115.97,36.45],
            '芜湖':[118.38,31.33],
            '唐山':[118.02,39.63],
            '平顶山':[113.29,33.75],
            '邢台':[114.48,37.05],
            '德州':[116.29,37.45],
            '济宁':[116.59,35.38],
            '荆州':[112.239741,30.335165],
            '宜昌':[111.3,30.7],
            '义乌':[120.06,29.32],
            '丽水':[119.92,28.45],
            '洛阳':[112.44,34.7],
            '秦皇岛':[119.57,39.95],
            '株洲':[113.16,27.83],
            '石家庄':[114.48,38.03],
            '莱芜':[117.67,36.19],
            '常德':[111.69,29.05],
            '保定':[115.48,38.85],
            '湘潭':[112.91,27.87],
            '金华':[119.64,29.12],
            '岳阳':[113.09,29.37],
            '长沙':[113,28.21],
            '衢州':[118.88,28.97],
            '廊坊':[116.7,39.53],
            '菏泽':[115.480656,35.23375],
            '合肥':[117.27,31.86],
            '武汉':[114.31,30.52],
            '大庆':[125.03,46.58]
          },
          option: {
            title: {
              text: '全国主要城市空气质量 - 百度地图',
              subtext: 'data from PM25.in',
              sublink: 'http://www.pm25.in',
              left: 'center'
            },
            tooltip : {
              trigger: 'item'
            },
            bmap: {
              center: [104.114129, 37.550339],
              zoom: 5,
              roam: true,
              mapStyle: {
                styleJson: [{
                  'featureType': 'water',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'land',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#f3f3f3'
                  }
                }, {
                  'featureType': 'railway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'highway',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#fdfdfd'
                  }
                }, {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'poi',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'green',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'subway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'manmade',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'local',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'boundary',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'building',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'label',
                  'elementType': 'labels.text.fill',
                  'stylers': {
                    'color': '#999999'
                  }
                }]
              }
            },
            series : [
              {
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: [],
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'purple'
                  }
                }
              },
              {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: [],
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                  }
                },
                zlevel: 1
              }
            ]
          }


        },
        summary: {
          instance: null,

        },
        preview: {
          instance: null,
          directionMap: {},
          weatherData: [],
          data: [],
          dims: {
            time: 0,
            windSpeed: 1,
            R: 2,
            waveHeight: 3,
            weatherIcon: 2,
            minTemp: 3,
            maxTemp: 4
          },
          arrowSize: 18,
          weatherIconSize: 45,
        },
        barSummary: {
          instance: null,

        }

      }
    },
    methods: {
      convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.map.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      },
      getMapOpt() {
        this.map.option.series[0].data = this.convertData(this.map.data);
        this.map.option.series[0].data = this.convertData(this.map.data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 6));
        return this.map.option;
      },
      initMapChart() {
        var dom = document.getElementById('map-chart');

        this.map.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.map.instance.setOption(this.getMapOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.map.instance.resize();
        });
      },
      getSummaryOpt() {
        return {
          title: {
            text: '天气情况统计',
            subtext: '虚构数据',
            left: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['西凉', '益州','兖州','荆州','幽州']
          },
          series : [
            {
              type: 'pie',
              radius : '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data:[
                {
                  value:1548,
                  name: '幽州',
                  label: {
                    normal: {
                      formatter: [
                        '{title|{b}}{abg|}',
                        '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                        '{hr|}',
                        '  {Sunny|}{value|202}{rate|55.3%}',
                        '  {Cloudy|}{value|142}{rate|38.9%}',
                        '  {Showers|}{value|21}{rate|5.8%}'
                      ].join('\n'),
                      backgroundColor: '#eee',
                      borderColor: '#777',
                      borderWidth: 1,
                      borderRadius: 4,
                      rich: {
                        title: {
                          color: '#eee',
                          align: 'center'
                        },
                        abg: {
                          backgroundColor: '#333',
                          width: '100%',
                          align: 'right',
                          height: 25,
                          borderRadius: [4, 4, 0, 0]
                        },
                        Sunny: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: this.weatherIcons.Sunny
                          }
                        },
                        Cloudy: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: this.weatherIcons.Cloudy
                          }
                        },
                        Showers: {
                          height: 30,
                          align: 'left',
                          backgroundColor: {
                            image: this.weatherIcons.Showers
                          }
                        },
                        weatherHead: {
                          color: '#333',
                          height: 24,
                          align: 'left'
                        },
                        hr: {
                          borderColor: '#777',
                          width: '100%',
                          borderWidth: 0.5,
                          height: 0
                        },
                        value: {
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'left'
                        },
                        valueHead: {
                          color: '#333',
                          width: 20,
                          padding: [0, 20, 0, 30],
                          align: 'center'
                        },
                        rate: {
                          width: 40,
                          align: 'right',
                          padding: [0, 10, 0, 0]
                        },
                        rateHead: {
                          color: '#333',
                          width: 40,
                          align: 'center',
                          padding: [0, 10, 0, 0]
                        }
                      }
                    }
                  }
                },
                {value:535, name: '荆州'},
                {value:510, name: '兖州'},
                {value:634, name: '益州'},
                {value:735, name: '西凉'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      },
      initSummaryChat() {
        var dom = document.getElementById('summary-chart');

        this.summary.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.summary.instance.setOption(this.getSummaryOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.summary.instance.resize();
        });
      },
      beforePreview() {
        var self = this;

        var rawData = {
          "data": [
            {
              "time": "2017-06-27T11:00:00.000Z",
              "windSpeed": 9,
              "R": "NNW",
              "waveHeight": 2.64
            },
            {
              "time": "2017-06-27T12:30:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 2.57
            },
            {
              "time": "2017-06-27T14:00:00.000Z",
              "windSpeed": 12,
              "R": "NNW",
              "waveHeight": 2.49
            },
            {
              "time": "2017-06-27T15:30:00.000Z",
              "windSpeed": 12,
              "R": "NNW",
              "waveHeight": 2.44
            },
            {
              "time": "2017-06-27T17:00:00.000Z",
              "windSpeed": 11,
              "R": "NNW",
              "waveHeight": 2.38
            },
            {
              "time": "2017-06-27T18:30:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 2.34
            },
            {
              "time": "2017-06-27T20:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 2.3
            },
            {
              "time": "2017-06-27T21:30:00.000Z",
              "windSpeed": 11,
              "R": "NNW",
              "waveHeight": 2.26
            },
            {
              "time": "2017-06-27T23:00:00.000Z",
              "windSpeed": 12,
              "R": "NNW",
              "waveHeight": 2.22
            },
            {
              "time": "2017-06-28T00:30:00.000Z",
              "windSpeed": 12,
              "R": "N",
              "waveHeight": 2.18
            },
            {
              "time": "2017-06-28T02:00:00.000Z",
              "windSpeed": 12,
              "R": "N",
              "waveHeight": 2.13
            },
            {
              "time": "2017-06-28T03:30:00.000Z",
              "windSpeed": 12,
              "R": "N",
              "waveHeight": 2.09
            },
            {
              "time": "2017-06-28T05:00:00.000Z",
              "windSpeed": 12,
              "R": "NNE",
              "waveHeight": 2.04
            },
            {
              "time": "2017-06-28T06:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 2.01
            },
            {
              "time": "2017-06-28T08:00:00.000Z",
              "windSpeed": 9,
              "R": "N",
              "waveHeight": 1.99
            },
            {
              "time": "2017-06-28T09:30:00.000Z",
              "windSpeed": 8,
              "R": "NNW",
              "waveHeight": 2
            },
            {
              "time": "2017-06-28T11:00:00.000Z",
              "windSpeed": 8,
              "R": "NW",
              "waveHeight": 2.01
            },
            {
              "time": "2017-06-28T12:30:00.000Z",
              "windSpeed": 8,
              "R": "NW",
              "waveHeight": 2.06
            },
            {
              "time": "2017-06-28T14:00:00.000Z",
              "windSpeed": 9,
              "R": "WNW",
              "waveHeight": 2.12
            },
            {
              "time": "2017-06-28T15:30:00.000Z",
              "windSpeed": 10,
              "R": "WNW",
              "waveHeight": 2.19
            },
            {
              "time": "2017-06-28T17:00:00.000Z",
              "windSpeed": 11,
              "R": "WNW",
              "waveHeight": 2.27
            },
            {
              "time": "2017-06-28T18:30:00.000Z",
              "windSpeed": 12,
              "R": "WNW",
              "waveHeight": 2.33
            },
            {
              "time": "2017-06-28T20:00:00.000Z",
              "windSpeed": 13,
              "R": "NW",
              "waveHeight": 2.39
            },
            {
              "time": "2017-06-28T21:30:00.000Z",
              "windSpeed": 13,
              "R": "NW",
              "waveHeight": 2.43
            },
            {
              "time": "2017-06-28T23:00:00.000Z",
              "windSpeed": 14,
              "R": "NW",
              "waveHeight": 2.46
            },
            {
              "time": "2017-06-29T00:30:00.000Z",
              "windSpeed": 16,
              "R": "NW",
              "waveHeight": 2.48
            },
            {
              "time": "2017-06-29T02:00:00.000Z",
              "windSpeed": 18,
              "R": "NNW",
              "waveHeight": 2.49
            },
            {
              "time": "2017-06-29T03:30:00.000Z",
              "windSpeed": 20,
              "R": "WNW",
              "waveHeight": 2.53
            },
            {
              "time": "2017-06-29T05:00:00.000Z",
              "windSpeed": 22,
              "R": "W",
              "waveHeight": 2.58
            },
            {
              "time": "2017-06-29T06:30:00.000Z",
              "windSpeed": 26,
              "R": "WSW",
              "waveHeight": 2.89
            },
            {
              "time": "2017-06-29T08:00:00.000Z",
              "windSpeed": 30,
              "R": "WSW",
              "waveHeight": 3.21
            },
            {
              "time": "2017-06-29T09:30:00.000Z",
              "windSpeed": 30,
              "R": "SW",
              "waveHeight": 3.58
            },
            {
              "time": "2017-06-29T11:00:00.000Z",
              "windSpeed": 29,
              "R": "SW",
              "waveHeight": 3.94
            },
            {
              "time": "2017-06-29T12:30:00.000Z",
              "windSpeed": 29,
              "R": "SW",
              "waveHeight": 4.08
            },
            {
              "time": "2017-06-29T14:00:00.000Z",
              "windSpeed": 29,
              "R": "SW",
              "waveHeight": 4.22
            },
            {
              "time": "2017-06-29T15:30:00.000Z",
              "windSpeed": 28,
              "R": "SW",
              "waveHeight": 4.25
            },
            {
              "time": "2017-06-29T17:00:00.000Z",
              "windSpeed": 28,
              "R": "SW",
              "waveHeight": 4.28
            },
            {
              "time": "2017-06-29T18:30:00.000Z",
              "windSpeed": 29,
              "R": "SSW",
              "waveHeight": 4.37
            },
            {
              "time": "2017-06-29T20:00:00.000Z",
              "windSpeed": 30,
              "R": "SSW",
              "waveHeight": 4.45
            },
            {
              "time": "2017-06-29T21:30:00.000Z",
              "windSpeed": 29,
              "R": "SSW",
              "waveHeight": 4.45
            },
            {
              "time": "2017-06-29T23:00:00.000Z",
              "windSpeed": 27,
              "R": "SSW",
              "waveHeight": 4.45
            },
            {
              "time": "2017-06-30T00:30:00.000Z",
              "windSpeed": 26,
              "R": "SSW",
              "waveHeight": 4.32
            },
            {
              "time": "2017-06-30T02:00:00.000Z",
              "windSpeed": 25,
              "R": "SSW",
              "waveHeight": 4.2
            },
            {
              "time": "2017-06-30T03:30:00.000Z",
              "windSpeed": 22,
              "R": "SSW",
              "waveHeight": 4.01
            },
            {
              "time": "2017-06-30T05:00:00.000Z",
              "windSpeed": 20,
              "R": "SSW",
              "waveHeight": 3.82
            },
            {
              "time": "2017-06-30T06:30:00.000Z",
              "windSpeed": 19,
              "R": "SSW",
              "waveHeight": 3.66
            },
            {
              "time": "2017-06-30T08:00:00.000Z",
              "windSpeed": 19,
              "R": "SSW",
              "waveHeight": 3.51
            },
            {
              "time": "2017-06-30T09:30:00.000Z",
              "windSpeed": 17,
              "R": "SSW",
              "waveHeight": 3.37
            },
            {
              "time": "2017-06-30T11:00:00.000Z",
              "windSpeed": 14,
              "R": "SSW",
              "waveHeight": 3.22
            },
            {
              "time": "2017-06-30T12:30:00.000Z",
              "windSpeed": 12,
              "R": "SSW",
              "waveHeight": 3.09
            },
            {
              "time": "2017-06-30T14:00:00.000Z",
              "windSpeed": 10,
              "R": "SW",
              "waveHeight": 2.96
            },
            {
              "time": "2017-06-30T15:30:00.000Z",
              "windSpeed": 9,
              "R": "WSW",
              "waveHeight": 2.83
            },
            {
              "time": "2017-06-30T17:00:00.000Z",
              "windSpeed": 9,
              "R": "W",
              "waveHeight": 2.7
            },
            {
              "time": "2017-06-30T18:30:00.000Z",
              "windSpeed": 10,
              "R": "W",
              "waveHeight": 2.58
            },
            {
              "time": "2017-06-30T20:00:00.000Z",
              "windSpeed": 10,
              "R": "WNW",
              "waveHeight": 2.45
            },
            {
              "time": "2017-06-30T21:30:00.000Z",
              "windSpeed": 10,
              "R": "WNW",
              "waveHeight": 2.33
            },
            {
              "time": "2017-06-30T23:00:00.000Z",
              "windSpeed": 10,
              "R": "WNW",
              "waveHeight": 2.21
            },
            {
              "time": "2017-07-01T00:30:00.000Z",
              "windSpeed": 10,
              "R": "NW",
              "waveHeight": 2.13
            },
            {
              "time": "2017-07-01T02:00:00.000Z",
              "windSpeed": 10,
              "R": "NW",
              "waveHeight": 2.05
            },
            {
              "time": "2017-07-01T03:30:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 2.02
            },
            {
              "time": "2017-07-01T05:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 2
            },
            {
              "time": "2017-07-01T06:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 2
            },
            {
              "time": "2017-07-01T08:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.99
            },
            {
              "time": "2017-07-01T09:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.98
            },
            {
              "time": "2017-07-01T11:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.96
            },
            {
              "time": "2017-07-01T12:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.94
            },
            {
              "time": "2017-07-01T14:00:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.93
            },
            {
              "time": "2017-07-01T15:30:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.93
            },
            {
              "time": "2017-07-01T17:00:00.000Z",
              "windSpeed": 11,
              "R": "NNW",
              "waveHeight": 1.93
            },
            {
              "time": "2017-07-01T18:30:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 1.94
            },
            {
              "time": "2017-07-01T20:00:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 1.96
            },
            {
              "time": "2017-07-01T21:30:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 1.97
            },
            {
              "time": "2017-07-01T23:00:00.000Z",
              "windSpeed": 10,
              "R": "NNW",
              "waveHeight": 1.97
            },
            {
              "time": "2017-07-02T00:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.96
            },
            {
              "time": "2017-07-02T02:00:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.94
            },
            {
              "time": "2017-07-02T03:30:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.91
            },
            {
              "time": "2017-07-02T05:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.88
            },
            {
              "time": "2017-07-02T06:30:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.84
            },
            {
              "time": "2017-07-02T08:00:00.000Z",
              "windSpeed": 10,
              "R": "N",
              "waveHeight": 1.8
            },
            {
              "time": "2017-07-02T09:30:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.78
            },
            {
              "time": "2017-07-02T11:00:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 1.76
            },
            {
              "time": "2017-07-02T12:30:00.000Z",
              "windSpeed": 12,
              "R": "N",
              "waveHeight": 1.76
            },
            {
              "time": "2017-07-02T14:00:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.77
            },
            {
              "time": "2017-07-02T15:30:00.000Z",
              "windSpeed": 14,
              "R": "N",
              "waveHeight": 1.81
            },
            {
              "time": "2017-07-02T17:00:00.000Z",
              "windSpeed": 15,
              "R": "N",
              "waveHeight": 1.85
            },
            {
              "time": "2017-07-02T18:30:00.000Z",
              "windSpeed": 14,
              "R": "N",
              "waveHeight": 1.86
            },
            {
              "time": "2017-07-02T20:00:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.87
            },
            {
              "time": "2017-07-02T21:30:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.88
            },
            {
              "time": "2017-07-02T23:00:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.9
            },
            {
              "time": "2017-07-03T00:30:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.91
            },
            {
              "time": "2017-07-03T02:00:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.93
            },
            {
              "time": "2017-07-03T03:30:00.000Z",
              "windSpeed": 13,
              "R": "N",
              "waveHeight": 1.96
            },
            {
              "time": "2017-07-03T05:00:00.000Z",
              "windSpeed": 13,
              "R": "NNE",
              "waveHeight": 1.99
            },
            {
              "time": "2017-07-03T06:30:00.000Z",
              "windSpeed": 12,
              "R": "NNE",
              "waveHeight": 2.03
            },
            {
              "time": "2017-07-03T08:00:00.000Z",
              "windSpeed": 11,
              "R": "NNE",
              "waveHeight": 2.08
            },
            {
              "time": "2017-07-03T09:30:00.000Z",
              "windSpeed": 11,
              "R": "N",
              "waveHeight": 2.12
            },
            {
              "time": "2017-07-03T11:00:00.000Z",
              "windSpeed": 11,
              "R": "NNW",
              "waveHeight": 2.16
            },
            {
              "time": "2017-07-03T12:30:00.000Z",
              "windSpeed": 15,
              "R": "N",
              "waveHeight": 2.22
            },
            {
              "time": "2017-07-03T14:00:00.000Z",
              "windSpeed": 20,
              "R": "N",
              "waveHeight": 2.27
            },
            {
              "time": "2017-07-03T15:30:00.000Z",
              "windSpeed": 20,
              "R": "N",
              "waveHeight": 2.33
            },
            {
              "time": "2017-07-03T17:00:00.000Z",
              "windSpeed": 19,
              "R": "N",
              "waveHeight": 2.39
            },
            {
              "time": "2017-07-03T18:30:00.000Z",
              "windSpeed": 17,
              "R": "N",
              "waveHeight": 2.44
            },
            {
              "time": "2017-07-03T20:00:00.000Z",
              "windSpeed": 15,
              "R": "N",
              "waveHeight": 2.49
            },
            {
              "time": "2017-07-03T21:30:00.000Z",
              "windSpeed": 16,
              "R": "NNW",
              "waveHeight": 2.49
            },
            {
              "time": "2017-07-03T23:00:00.000Z",
              "windSpeed": 17,
              "R": "WNW",
              "waveHeight": 2.49
            },
            {
              "time": "2017-07-04T00:30:00.000Z",
              "windSpeed": 18,
              "R": "W",
              "waveHeight": 2.47
            },
            {
              "time": "2017-07-04T02:00:00.000Z",
              "windSpeed": 20,
              "R": "SW",
              "waveHeight": 2.44
            },
            {
              "time": "2017-07-04T03:30:00.000Z",
              "windSpeed": 21,
              "R": "SW",
              "waveHeight": 2.5
            },
            {
              "time": "2017-07-04T05:00:00.000Z",
              "windSpeed": 21,
              "R": "WSW",
              "waveHeight": 2.56
            },
            {
              "time": "2017-07-04T06:30:00.000Z",
              "windSpeed": 22,
              "R": "WSW",
              "waveHeight": 2.69
            },
            {
              "time": "2017-07-04T08:00:00.000Z",
              "windSpeed": 22,
              "R": "WSW",
              "waveHeight": 2.83
            },
            {
              "time": "2017-07-04T09:30:00.000Z",
              "windSpeed": 23,
              "R": "WSW",
              "waveHeight": 2.94
            },
            {
              "time": "2017-07-04T11:00:00.000Z",
              "windSpeed": 23,
              "R": "WSW",
              "waveHeight": 3.06
            },
            {
              "time": "2017-07-04T12:30:00.000Z",
              "windSpeed": 24,
              "R": "WSW",
              "waveHeight": 3.06
            },
            {
              "time": "2017-07-04T14:00:00.000Z",
              "windSpeed": 24,
              "R": "SW",
              "waveHeight": 3.06
            },
            {
              "time": "2017-07-04T15:30:00.000Z",
              "windSpeed": 25,
              "R": "SW",
              "waveHeight": 3.04
            },
            {
              "time": "2017-07-04T17:00:00.000Z",
              "windSpeed": 25,
              "R": "SW",
              "waveHeight": 3.03
            },
            {
              "time": "2017-07-04T18:30:00.000Z",
              "windSpeed": 26,
              "R": "SW",
              "waveHeight": 3
            },
            {
              "time": "2017-07-04T20:00:00.000Z",
              "windSpeed": 26,
              "R": "SW",
              "waveHeight": 2.97
            }
          ],
          "title": "HOBART",
          "forecast": [
            {
              "localDate": "2017-06-28",
              "day": "Wednesday",
              "minTemp": 4,
              "maxTemp": 13,
              "shortDesc": "Partly cloudy.",
              "skyIcon": "Cloudy",
              "weatherIcon": "MostlySunnyPartlyCloudy",
              "probabilityPrecip": 0,
              "rangePrecipText": "0 to 1 mm",
              "sunrise": "768",
              "sunset": "1673",
              "moonPhase": 0.682,
              "tides": "4,6,18,0.3,L,13,5,1.26,H,18,24,0.94,L,23,57,1.41,H"
            },
            {
              "localDate": "2017-06-29",
              "day": "Thursday",
              "minTemp": 5,
              "maxTemp": 11,
              "shortDesc": "Showers.",
              "skyIcon": "Showers",
              "weatherIcon": "Shower",
              "probabilityPrecip": 70,
              "rangePrecipText": "0 to 1 mm",
              "sunrise": "768",
              "sunset": "1673",
              "moonPhase": 0.901,
              "tides": "4,7,11,0.38,L,13,52,1.29,H,19,32,0.89,L"
            },
            {
              "localDate": "2017-06-30",
              "day": "Friday",
              "minTemp": 3,
              "maxTemp": 11,
              "shortDesc": "Shower or two.",
              "skyIcon": "Showers",
              "weatherIcon": "Shower",
              "probabilityPrecip": 70,
              "rangePrecipText": "0 to 1 mm",
              "sunrise": "768",
              "sunset": "1675",
              "moonPhase": 1.112,
              "tides": "4,1,0,1.3,H,8,0,0.48,L,14,34,1.31,H,20,41,0.84,L"
            },
            {
              "localDate": "2017-07-01",
              "day": "Saturday",
              "minTemp": 1,
              "maxTemp": 11,
              "shortDesc": "Mostly sunny.",
              "skyIcon": "Sunny",
              "weatherIcon": "MostlySunnyPartlyCloudy",
              "probabilityPrecip": 0,
              "rangePrecipText": "",
              "sunrise": "768",
              "sunset": "1675",
              "moonPhase": 1.315,
              "tides": "4,2,3,1.19,H,8,42,0.58,L,15,13,1.33,H,21,47,0.79,L"
            },
            {
              "localDate": "2017-07-02",
              "day": "Sunday",
              "minTemp": 2,
              "maxTemp": 13,
              "shortDesc": "Mostly sunny.",
              "skyIcon": "Sunny",
              "weatherIcon": "MostlySunnyPartlyCloudy",
              "probabilityPrecip": 0,
              "rangePrecipText": "",
              "sunrise": "768",
              "sunset": "1676",
              "moonPhase": 1.513,
              "tides": "4,3,8,1.1,H,9,16,0.67,L,15,48,1.35,H,22,49,0.74,L"
            },
            {
              "localDate": "2017-07-03",
              "day": "Monday",
              "minTemp": 3,
              "maxTemp": 12,
              "shortDesc": "Mostly sunny.",
              "skyIcon": "Sunny",
              "weatherIcon": "MostlySunnyPartlyCloudy",
              "probabilityPrecip": 20,
              "rangePrecipText": "0 to 1 mm",
              "sunrise": "768",
              "sunset": "1676",
              "moonPhase": 1.898,
              "tides": "4,4,15,1.03,H,9,43,0.75,L,16,20,1.37,H,23,41,0.69,L"
            },
            {
              "localDate": "2017-07-04",
              "day": "Tuesday",
              "minTemp": 5,
              "maxTemp": 12,
              "shortDesc": "Shower or two.",
              "skyIcon": "Showers",
              "weatherIcon": "Shower",
              "probabilityPrecip": 50,
              "rangePrecipText": "0 to 2 mm",
              "sunrise": "768",
              "sunset": "1678",
              "moonPhase": 2.088,
              "tides": "4,5,19,1,H,10,0,0.81,L,16,51,1.39,H"
            }
          ]
        };

        echarts.util.each(
          ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'],
          function (name, index) {
            self.preview.directionMap[name] = Math.PI / 8 * index;
          }
        );

        self.preview.data = echarts.util.map(rawData.data, function (entry) {
          return [entry.time, entry.windSpeed, entry.R, entry.waveHeight];
        });

        self.preview.weatherData = echarts.util.map(rawData.forecast, function (entry) {
          return [entry.localDate, 0, self.weatherIcons[entry.skyIcon], entry.minTemp, entry.maxTemp];
        });

        this.initPreviewChart();
      },
      renderArrow(param, api) {
        var self = this;
        var point = api.coord([
          api.value(self.preview.dims.time),
          api.value(self.preview.dims.windSpeed)
        ]);

        return {
          type: 'path',
          shape: {
            pathData: 'M31 16l-15-15v9h-26v12h26v9z',
            x: -self.preview.arrowSize / 2,
            y: -self.preview.arrowSize / 2,
            width: self.preview.arrowSize,
            height: self.preview.arrowSize
          },
          rotation: self.preview.directionMap[api.value(self.preview.dims.R)],
          position: point,
          style: api.style({
            stroke: '#555',
            lineWidth: 1
          })
        };
      },
      renderWeather(param, api) {
        var self = this;

        var point = api.coord([
          api.value(self.preview.dims.time) + 3600 * 24 * 1000 / 2,
          0
        ]);

        return {
          type: 'group',
          children: [{
            type: 'image',
            style: {
              image: api.value(self.preview.dims.weatherIcon),
              x: -self.preview.weatherIconSize / 2,
              y: -self.preview.weatherIconSize / 2,
              width: self.preview.weatherIconSize,
              height: self.preview.weatherIconSize
            },
            position: [point[0], 110]
          }, {
            type: 'text',
            style: {
              text: api.value(self.preview.dims.minTemp) + ' - ' + api.value(self.preview.dims.maxTemp) + '°',
              textFont: api.font({fontSize: 14}),
              textAlign: 'center',
              textVerticalAlign: 'bottom'
            },
            position: [point[0], 80]
          }]
        };
      },
      getPreviewOpt() {

        var self = this;

        var renderArrow = function(param, api) {
          var point = api.coord([
            api.value(self.preview.dims.time),
            api.value(self.preview.dims.windSpeed)
          ]);

          return {
            type: 'path',
            shape: {
              pathData: 'M31 16l-15-15v9h-26v12h26v9z',
              x: -self.preview.arrowSize / 2,
              y: -self.preview.arrowSize / 2,
              width: self.preview.arrowSize,
              height: self.preview.arrowSize
            },
            rotation: self.preview.directionMap[api.value(self.preview.dims.R)],
            position: point,
            style: api.style({
              stroke: '#555',
              lineWidth: 1
            })
          };
        };

        var renderWeather = function(param, api) {
          var point = api.coord([
            api.value(self.preview.dims.time) + 3600 * 24 * 1000 / 2,
            0
          ]);

          return {
            type: 'group',
            children: [{
              type: 'image',
              style: {
                image: api.value(self.preview.dims.weatherIcon),
                x: -self.preview.weatherIconSize / 2,
                y: -self.preview.weatherIconSize / 2,
                width: self.preview.weatherIconSize,
                height: self.preview.weatherIconSize
              },
              position: [point[0], 110]
            }, {
              type: 'text',
              style: {
                text: api.value(self.preview.dims.minTemp) + ' - ' + api.value(self.preview.dims.maxTemp) + '°',
                textFont: api.font({fontSize: 14}),
                textAlign: 'center',
                textVerticalAlign: 'bottom'
              },
              position: [point[0], 80]
            }]
          };
        };


        return {
          title: {
            text: '天气 风向 风速 海浪 预报',
            subtext: '示例数据源于 www.seabreeze.com.au',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return [
                echarts.format.formatTime('yyyy-MM-dd', params[0].value[self.preview.dims.time])
                + ' ' + echarts.format.formatTime('hh:mm', params[0].value[self.preview.dims.time]),
                '风速：' + params[0].value[self.preview.dims.windSpeed],
                '风向：' + params[0].value[self.preview.dims.R],
                '浪高：' + params[0].value[self.preview.dims.waveHeight]
              ].join('<br>');
            }
          },
          grid: {
            top: 160,
            bottom: 125
          },
          xAxis: {
            type: 'time',
            maxInterval: 3600 * 1000 * 24,
            splitLine: {
              lineStyle: {
                color: '#ddd'
              }
            }
          },
          yAxis: [{
            name: '风速（节）',
            nameLocation: 'middle',
            nameGap: 35,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#ddd'
              }
            }
          }, {
            name: '浪高（米）',
            nameLocation: 'middle',
            nameGap: 35,
            max: 6,
            axisLine: {
              lineStyle: {
                color: '#015DD5'
              }
            },
            splitLine: {show: false}
          }, {
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false},
            splitLine: {show: false}
          }],
          visualMap: {
            type: 'piecewise',
            // show: false,
            orient: 'horizontal',
            left: 'center',
            bottom: 10,
            pieces: [{
              gte: 17,
              color: '#18BF12',
              label: '大风（>=17节）'
            }, {
              gte: 11,
              lt: 17,
              color: '#f4e9a3',
              label: '中风（11  ~ 17 节）'
            }, {
              lt: 11,
              color: '#D33C3E',
              label: '微风（小于 11 节）'
            }],
            seriesIndex: 1,
            dimension: 1
          },
          dataZoom: [{
            type: 'inside',
            xAxisIndex: 0,
            minSpan: 5
          }, {
            type: 'slider',
            xAxisIndex: 0,
            minSpan: 5,
            height: 20,
            bottom: 50,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '120%'
          }],
          series: [{
            type: 'line',
            yAxisIndex: 1,
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(88,160,253,1)'
                  }, {
                    offset: 0.5, color: 'rgba(88,160,253,0.7)'
                  }, {
                    offset: 1, color: 'rgba(88,160,253,0)'
                  }]
                }
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(88,160,253,1)'
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(88,160,253,1)'
              }
            },
            encode: {
              x: self.preview.dims.time,
              y: self.preview.dims.waveHeight
            },
            data: self.preview.data,
            z: 2
          }, {
            type: 'custom',
            renderItem: renderArrow,
            encode: {
              x: self.preview.dims.time,
              y: self.preview.dims.windSpeed
            },
            data: self.preview.data,
            z: 10
          }, {
            type: 'line',
            symbol: 'none',
            encode: {
              x: self.preview.dims.time,
              y: self.preview.dims.windSpeed
            },
            lineStyle: {
              normal: {
                color: '#aaa',
                type: 'dotted'
              }
            },
            data: self.preview.data,
            z: 1
          }, {
            type: 'custom',
            renderItem: renderWeather,
            data: self.preview.weatherData,
            tooltip: {
              trigger: 'item',
              formatter: function (param) {
                return param.value[self.preview.dims.time] + ': '
                  + param.value[self.preview.dims.minTemp] + ' - ' + param.value[self.preview.dims.maxTemp] + '°';
              }
            },
            yAxisIndex: 2,
            z: 11
          }]
        };
      },
      initPreviewChart() {
        var dom = document.getElementById('preview-chart');

        this.preview.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.preview.instance.setOption(this.getPreviewOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.preview.instance.resize();
        });
      },
      getBarOpt() {
        return {
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'直接访问',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
      },
      initBarChart() {
        var dom = document.getElementById('bar-summary-chart');

        this.barSummary.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.barSummary.instance.setOption(this.getBarOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.barSummary.instance.resize();
        });
      }

    },
    mounted() {

      this.initMapChart();
      this.initSummaryChat();
      this.beforePreview();
      this.initBarChart();

    }
  }

</script>

<style>
  .chart-container {
    padding: 2vh 1vh;
    height: 520px;
  }
  .button-container {
    height: 120px;
    line-height: 120px;
    text-align: center;
    vertical-align: middle;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
